import {Text, View} from "react-native-ui-lib";
import {ThemedView} from "@/components/ThemedView";
import {useEffect, useState} from "react";
import apiService from "../http/apiService";
import {ResponseHomeIconList} from "../model/homeIconModel";
import useRequestStatus from "../http/useRequestStatus";
import {GridMenu} from "@/app/home/GridMenu";
import {ResponseAdlist} from "@/app/model/ResponseAdlist";
import {HomeCarousel} from "@/app/home/HomeCarousel";
import {ThemedText} from "@/components/ThemedText";
import {NewsGridMenu} from "@/app/news/NewsGridMenu";
import {Animated, FlatList, StyleSheet} from "react-native";
import ScrollView = Animated.ScrollView;
import {LiveYuGaoView} from "@/app/news/LiveYuGaoView";
import * as React from "react";
import Head from "expo-router/head";
import {Header} from "react-native/Libraries/NewAppScreen";

function TitleView(title: string) {
    return <View style={{flexDirection: 'row', marginTop: 20, marginLeft: 10, alignItems: 'center'}}>
        <View style={{width: 5, height: 18, backgroundColor: '#308fff'}}/>
        <ThemedText style={{marginLeft: 5, fontSize: 20}}>{title}</ThemedText>
    </View>;
}

function NewsScreen() {
    const [viewState, requestApi] = useRequestStatus()
    const [resultData, setResultData] = useState<ResponseHomeIconList | null>(null);
    const [adData, setADData] = useState<ResponseAdlist | null>(null);
    const [liveListData, setLiveListData] = useState<ResponseLiveListData | null>(null);

    useEffect(() => {
        loadNet()
    }, [])
    const loadNet = async () => {
        const res = await requestApi(apiService.getHomeIconList())
        setResultData(res)
        // logUtils.debug(serverResponse.toString())
        const homeADResponse = await requestApi(apiService.getHomeADList())
        setADData(homeADResponse)
        const liveListResponse = await requestApi(apiService.getLiveList())
        setLiveListData(liveListResponse)
        // if (res !== null){
        //     logUtils.debug(res.data.toString())
        // }
    }
    return <ThemedView style={{flex: 1}}>
        <ScrollView>
            <Header></Header>
            {adData?.data && <HomeCarousel
                images={adData.data.map(item => item.resourceurl)} // 确保返回资源 URL
            />}
            <View>
                {resultData?.data?.list && <GridMenu
                    menuItems={resultData.data.list.map(item => ({
                        name: item.ChtName,
                        imageUrl: item.MenuIconNew // 假设这里是图片的 URL
                    }))}
                />}
            </View>
            {TitleView('直播预告')}
            {/*<ScrollView horizontal showsHorizontalScrollIndicator={false}*/}
            {/*            contentContainerStyle={{padding: 0, margin: 0}} style={styles.scrollView}>*/}
            {/*    <LiveYuGaoView content="内容1"/>*/}
            {/*    <LiveYuGaoView content="内容2"/>*/}
            {/*</ScrollView>*/}
            <FlatList
                horizontal
                data={[{ key: '内容1' }, { key: '内容2' }]}
                renderItem={({ item }) => <LiveYuGaoView content={item.key} />}
                keyExtractor={(item) => item.key}
                nestedScrollEnabled
                showsHorizontalScrollIndicator={false}
                contentContainerStyle={{ padding: 0, margin: 0 }}
                style={styles.scrollView}
            />
            {TitleView('精彩直播')}
            <View>
                {liveListData?.data?.list && <NewsGridMenu
                    menuItems={liveListData.data.list.map(item => ({
                        name: item.title,
                        imageUrl: "https://jybmanage.iqdii.com" + item.imageUrl // 假设这里是图片的 URL
                    }))}
                />}
            </View>
            <Text>Home icon {resultData ? resultData.clientIp : 'Loading...'}</Text>

        </ScrollView>
    </ThemedView>;

}

const styles = StyleSheet.create({
    scrollView: {
        flexDirection: 'row',
        width: '100%', // 可以设置为需要的宽度
    },
});
export default NewsScreen